<template>
  <User v-if="isme" />
  <el-container
    v-else
    style="height: 100%"
    v-loading="isLoading"
    :style="{ zIndex: 1 }"
  >
    <el-header
      class="zone-head-container bj"
      :style="{
        backgroundImage:
          // 'url(https://pic.imgdb.cn/item/64eb64df661c6c8e549e1ce8.png)',
          // 'url(/image/{2FB1489E-9572-4803-9114-850E04589092}.png)',
          userInfo.data.background == null || userInfo.data.background == ''
            ? 'url(/image/headbj.png)'
            : `url(${userInfo.data.background})`,
        padding: '0',
      }"
    >
      <img
        v-if="
          userInfo.data.background == null ||
          userInfo.data.background == '' ||
          userInfo.data.background == set.background
        "
        class="img2"
        src="https://pic.imgdb.cn/item/64e8cf5d661c6c8e5411e646.png"
      />
      <div class="head-area">
        <el-container>
          <el-aside :width="`${headsize * 1.2}px`">
            <el-upload
              :action="uploadServer"
              v-model="userInfo.data.headurl"
              :with-credentials="true"
              :show-file-list="false"
              :on-success="uploadCover"
              accept="image/png, image/jpeg"
            >
              <el-avatar
                :size="headsize"
                :src="
                  !userInfo.data.headurl || userInfo.data.headurl == ''
                    ? '/image/{56EB5E67-81B4-4a62-B444-7C87F6A31155}.png'
                    : userInfo.data.headurl
                "
              />
              <div class="avatar-border me"><div class="me"></div></div>
            </el-upload>
          </el-aside>
          <el-main class="padding-0 center" style="overflow-x: hidden">
            <el-row class="center">
              <el-text class="nickname">{{ userInfo.data.nickname }}</el-text>
              <UserRole :role="userInfo.data.role" />
              <el-tag size="small" effect="light" round>
                UID: {{ userInfo.data.id }}
              </el-tag>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </el-header>

    <el-header class="zone-head-container btn-area" style="padding: 0">
      <el-tabs
        tab-position="top"
        style="height: 200px"
        class="demo-tabs"
        :model-value="tab"
        @tab-click="console.log('tab-click')"
      >
        <el-tab-pane name="me">
          <template #label>
            <span class="custom-tabs-label" @click="tab = 'me'">
              <el-icon><UserFilled /></el-icon>
              主页
            </span>
          </template>

          <MdPreview
            v-if="userInfo.data.signature"
            :modelValue="userInfo.data.signature"
            :editorId="`preview-user-${userInfo.data.id}`"
          />
        </el-tab-pane>

        <el-tab-pane name="bbs">
          <template #label>
            <span class="custom-tabs-label" @click="tab = 'bbs'"
              ><el-icon> <ChatLineSquare /> </el-icon
              ><span> 我的帖子 </span></span
            >
          </template>
          <BbsPage />
        </el-tab-pane>
        <el-tab-pane name="world">
          <template #label>
            <span class="custom-tabs-label" @click="toPage('world')"
              ><el-icon> <UploadFilled /> </el-icon><span>我的存档</span></span
            >
          </template>
          <WorldPage />
        </el-tab-pane>
        <el-tab-pane name="mod">
          <template #label>
            <span class="custom-tabs-label" @click="toPage('mod')"
              ><el-icon> <Promotion /> </el-icon><span>我的资源</span></span
            >
          </template>
          <ModPage />
        </el-tab-pane>

        <el-tab-pane name="user">
          <template #label>
            <span class="custom-tabs-label" @click="tab = 'user'"
              ><el-icon> <Promotion /> </el-icon><span>用户设置</span></span
            >
          </template>
          <div
            style="
              width: calc(100vw - 40px);
              display: flex;
              justify-content: center;
              flex-wrap: wrap;
            "
          >
            <Setup />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-header>
  </el-container>
</template>

<script lang="ts">
// 用户主页
import {
  House,
  ChatLineSquare,
  UploadFilled,
  Promotion,
  UserFilled,
} from '@element-plus/icons-vue'
import ModPage from '@comps/user/zone-page/mod.vue'
import BbsPage from '@comps/user/zone-page/bbs.vue'
import Setup from '@comps/user/zone-page/setup.vue'
import WorldPage from '@comps/user/zone-page/world.vue'
import User from '@comps/user/user.vue'
import { ElMessage } from 'element-plus'
import Cfg from '@/config/config.ts'
import Method from '@/globalmethods.ts'
import UserRole from '@comps/user/roleList.vue'
import { api } from '@/apitypes'
import { MdPreview, MdEditor } from 'md-editor-v3'

export default {
  name: 'UserIndex',
  components: {
    UserRole,
    Promotion,
    House,
    ChatLineSquare,
    UploadFilled,
    ModPage,
    WorldPage,
    BbsPage,
    UserFilled,
    MdPreview,
    MdEditor,
    Setup,
    User,
  },
  data() {
    let {
      userInfo,
      set,
      config: { server },
      headsize: { userindex },
    } = Cfg
    return {
      set,
      userInfo,
      uploadServer: `${server}/Upload/Upload`,
      tab: 'me',
      isLoading: false,
      bbsList: <any>[],
      worldList: <any>[],
      modList: <any>[],
      headsize: userindex,
      isme: false,
    }
  },
  methods: {
    toPage(val: string) {
      this.$router.push(`/user/${val}`)
    },
    uploadCover(e: any) {
      Cfg.userInfo.data.headurl = Method.getHostUrl(e.data.src, true)
      Method.api_post('/user/edit', { avatar: e.data.src })
        .then((res) => {
          let obj = res.data as api
          if (obj.code == 200) {
            ElMessage({
              type: 'success',
              message: obj.msg,
            })
            Method.getInformation()
          } else {
            ElMessage({
              type: 'error',
              message: obj.msg,
            })
          }
        })
        .catch((err) => {
          ElMessage({
            type: 'error',
            message: '请求错误：' + err.message,
          })
        })
    },
    getUserInfo() {
      this.isLoading = true
      Method.api_get(`/user/zone/${this.userInfo.id}`)
        .then((response: any) => {
          let res = response.data as api
          this.isLoading = false
          if (res.code == 200) {
            res.data.bbs.forEach((x: any) => {
              x.create_time = Method.formatNormalTime(x.create_time)
            })
            this.bbsList = res.data.bbs
            this.modList = res.data.mod
            res.data.world.forEach((x: any) => {
              x.type_name = Method.getScTypeName(x.file_type)
              x.file_name = Method.getFileName(x.name)
              x.create_time = Method.formatNormalTime(x.create_time)
            })
            this.worldList = res.data.world
          } else {
            ElMessage(res.msg)
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
  },
  mounted() {
    console.log(this.$route.params.uid)

    if (/\d+/.test(this.$route.params.uid as string)) {
      this.isme = true
    } else {
      if (this.$route.params.uid) {
        this.tab = this.$route.params.uid as string
      } else {
        this.$router.replace('/user/me')
      }
    }
  },
  watch: {
    $route(val) {
      if (/\d+/.test(val.params.uid as string)) {
        this.isme = true
      } else {
        this.isme = false
        this.tab = (val.params.uid as string) || 'me'
      }
    },
  },
}
</script>

<style scoped>
.padding-0 {
  padding: 0;
}
.bj {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.signature {
  margin: 0 12px;
  color: #fff;
}

.el-tabs {
  flex: 1;
  padding: 0;
  width: 100%;
}

.custom-tabs-label {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.zone-head-container {
  padding-top: 20px;
  display: flex;
  align-items: flex-end;
  position: relative;
  height: 140px;
  width: 100%;
}

.zone-head-container .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zone-head-container .img2 {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  height: 35%;
  object-fit: cover;
}

.zone-head-container.btn-area {
  background: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: auto;
}

.head-area {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  padding: 0 1rem 0.5rem 1rem;
  z-index: 1;
  background: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.4)
  );
}

.nickname {
  margin: 0 12px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.center {
  display: flex;
  align-items: center;
}
</style>
